<!--
 * @Date: 2022-08-24 17:21:42
 * @LastEditTime: 2022-09-15 09:46:55
-->
<template>
  <div class="box">
    <div class="ew-elevator-building">
      <div class="ew-elevator-shaft">
        <div class="ew-elevator" :style="elevatorStyle">
          <div
            class="ew-elevator-left-door ew-elevator-door"
            :class="isOpen ? 'toggle' : ''"
          ></div>
          <div
            class="ew-elevator-right-door ew-elevator-door"
            :class="isOpen ? 'toggle' : ''"
          ></div>
        </div>
      </div>
      <div class="ew-elevator-storey-zone">
        <div
          class="ew-elevator-storey"
          v-for="(item, index) in count"
          :key="item"
        >
          <div class="ew-elevator-controller">
            <button
              class="ew-elevator-to-top ew-elevator-btn"
              :class="outsideUp.includes(count - item + 1) ? 'checked' : ''"
              @click="handleClickStorey(0, item)"
            >
              ↑
            </button>
            <button
              class="ew-elevator-to-bottom ew-elevator-btn"
              :class="outsideDown.includes(count - item + 1) ? 'checked' : ''"
              @click="handleClickStorey(1, item)"
            >
              ↓
            </button>
          </div>
          <div class="ew-elevator-count">{{ count - item + 1 }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="ew-elevator-panel" :style="{ opacity: isShowPanel ? 1 : 0 }">
      <button
        class="ew-elevator-panel-btn"
        v-for="(item, index) in count"
        @click="handleClickPanel(item)"
      >
        {{ item }}
      </button>
      <button @click="handleOpenDoor">open</button>
      <button @click="handleCloseDoor">close</button>
    </div> -->
  </div>
</template>

<script setup>
import {
  onMounted,
  ref,
  getCurrentInstance,
  reactive,
  computed,
  watch,
} from "vue";
const { proxy } = getCurrentInstance();

onMounted(() => {
  init(6);
});

/**
 * @description: 初始化页面
 * @return {*}
 */
const count = ref(0);
const btnArr = reactive([]);
const init = (num) => {
  count.value = num;
};

const direction = ref();
const queue = reactive([]);
const outsideUp = computed(() => {
  return getArr(queue, 0) || [];
});
const outsideDown = computed(() => {
  return getArr(queue, 1) || [];
});
const getArr = (arr, flag) => {
  let temp = [];
  arr
    .filter((item) => {
      return item[1] === flag;
    })
    .forEach((item) => {
      temp.push(item[0]);
    });
  return temp;
};
const handleClickStorey = (direct, floor) => {
  floor = count.value - floor + 1;
  direction.value = direct == 0 ? "up" : "down";
  queue.push([floor, direct]);
};

watch(queue, (val) => {
  if (val.length > 0) {
    queue.forEach((item) => {
      elevatorMove(item[0]);
    });
  }
});

/**
 * @description: 电梯移动
 * @param {*} floor
 * @return {*}
 */
const currentFloor = ref(1);
const isRunning = ref(false);
const elevatorStyle = ref();
const elevatorMove = (floor) => {
  if (isRunning.value) return;
  isRunning.value = true;
  const time = Math.abs(floor - currentFloor.value);
  elevatorStyle.value = {
    transitionDuration: time + "s",
    bottom: (floor - 1) * 99 + "px",
  };
  currentFloor.value = floor;
  setTimeout(() => {
    handleOpenDoor();
    setTimeout(() => {
      handleCloseDoor();
      queue.shift();
    }, 3000);
  }, time * 1000);
};

const handleClickPanel = (item) => {
  elevatorMove(item);
};

const isOpen = ref(false);
const handleOpenDoor = () => {
  isOpen.value = true;
  setTimeout(() => {
    handleCloseDoor();
  }, 3000);
};
const handleCloseDoor = () => {
  isOpen.value = false;
  isRunning.value = false;
};
</script>

<style lang="less" scoped>
.box {
  width: 100vh;
  display: flex;
  margin: 3vh auto;
  justify-content: center;
  .ew-elevator-building {
    width: 350px;
    max-width: 100%;
    border: 6px solid rgba(0, 0, 0.85);
    overflow: hidden;
    display: flex;

    .ew-elevator-shaft {
      border-right: 2px solid rgba(0, 0, 0.85);
      width: 200px;
      padding: 1px;
      position: relative;
      .ew-elevator {
        height: 98px;
        width: calc(100% - 2px);
        background: url("../assets/avatar.jpg") center / cover no-repeat;
        border: 1px solid rgba(0, 0, 0.85);
        padding: 1px;
        transition-timing-function: ease-in-out;
        position: absolute;
        left: 1px;
        bottom: 1px;
        box-sizing: border-box;
        .ew-elevator-door {
          position: absolute;
          width: 50%;
          height: 100%;
          background-color: rgba(0, 0, 0.85);
          border: 1px solid #fff;
          top: 0;
          &.ew-elevator-left-door {
            left: 0;
            &.toggle {
              animation: doorLeft 3s 1s cubic-bezier(0.075, 0.82, 0.165, 1);
            }
            &.close {
              animation: doorLeftClose 3s 1s cubic-bezier(0.075, 0.82, 0.165, 1);
            }
          }

          &.ew-elevator-right-door {
            right: 0;
            &.toggle {
              animation: doorRight 3s 1s cubic-bezier(0.075, 0.82, 0.165, 1);
            }
          }
        }
      }
    }

    .ew-elevator-storey-zone {
      width: auto;
      height: 100%;
      z-index: 2;
      background: #fff;
      .ew-elevator-storey {
        display: flex;
        align-items: center;
        height: 98px;
        border-bottom: 1px solid rgba(0, 0, 0.85);
        .ew-elevator-controller {
          width: 70px;
          height: 98px;
          padding: 8px 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
        .ew-elevator-btn {
          width: 36px;
          height: 36px;
          border: 1px solid rgba(0, 0, 0.85);
          border-radius: 50%;
          outline: none;
          cursor: pointer;
          background-color: #fff;
          &.checked {
            background-color: rgba(0, 0, 0.85);
            color: #fff;
          }
          &:last-of-type {
            margin-top: 8px;
          }
          &[disabled] {
            cursor: not-allowed;
            background-color: #898989;
            color: #c2c3c4;
          }
        }
        .ew-elevator-count {
          width: 80px;
          height: 98px;
          text-align: center;
          font: 56px / 98px "微软雅黑", "楷体";
        }
      }
    }
  }
  .ew-elevator-panel {
    width: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: fit-content;
    border: 1px solid rgba(0, 0, 0.85);
    margin-left: 30px;
    padding: 8px;
    padding-bottom: 0;
    box-sizing: border-box;
    opacity: 1;
    .ew-elevator-panel-btn {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(0, 0, 0.85);
      border-radius: 50%;
      outline: none;
      cursor: pointer;
      background-color: #fff;
      margin-bottom: 8px;
      &.checked {
        background-color: rgba(0, 0, 0.85);
        color: #fff;
      }
    }
  }
}

@keyframes doorLeft {
  0% {
    left: 0px;
  }
  25% {
    left: -100px;
  }
  50% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}
@keyframes doorLeftClose {
  50% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}

@keyframes doorRight {
  0% {
    right: 0px;
  }
  25% {
    right: -100px;
  }
  50% {
    right: -100px;
  }
  100% {
    right: 0;
  }
}
</style>
